<template>
  <div>
    <left-left style="width: 93%"/>
    <team-manage-left style="margin-left: 5%;position: absolute;top:0;width: 65%"/>
    <el-container style="position:absolute;top:0;margin-left: 18%;height: 100vh">
      <el-aside>
        <el-divider class="el-divider1" direction="vertical" style="height: 1000%"></el-divider>
      </el-aside>



      <el-main >
        <div style="margin-left: 2%;margin-top: 3%;font-size: 20px">团队设置</div>
        <div style="font-size: 15px;margin-left: 2%;margin-top: 3%;font-family: 'Adobe 黑体 Std R'">
          <div>团队名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button class="el-icon-edit" @click="changeName"></el-button>
          </div>
          <div>到期时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.dueTime}}</div>
          <div style="margin-top: 1.5%">创建时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.setUpTime}}</div>
          <div style="margin-top: 1.3%">上限人数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input-number v-model="maxCount"  @click="handleChange" :min="1" :max="10" label="描述文字" size="mini"></el-input-number></div>
          <div style="margin-top: 1.5%">团队人数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.nowCount}}</div>
          <div style="margin-top: 1.5%">协作项目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.count}}</div>
          <div style="margin-top: 1.5%">团队ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.id}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-link style="color: red" @click="copyID">复制</el-link></div>
          <div style="margin-top: 1.5%">团队所有人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.owner}}</div>
        </div>

      </el-main>




    </el-container>


  </div>
</template>

<script>
import leftLeft from '@/components/left/leftLeft.vue'
import teamManageLeft from "@/components/left/teamManageLeft";
export default {
  name: 'teammateManagement',
  components: {
    leftLeft,
    teamManageLeft
  },
  data(){
    return{
      name:"",
      dueTime:"",
      setUpTime:"",
      maxCount:'',
      nowCount:'',
      count:10,
      id:"",
      owner:""
    }
  },
  created() {
    this.$store.state.teamID=JSON.parse(localStorage.getItem("insuranceTeamCode"));
    this.$store.state.ID=JSON.parse(localStorage.getItem("insuranceUserCode"));

    this.getInfo()

  },
  methods:{
    getInfo(){
      const formData=new FormData();

      formData.append("userID",this.$store.state.ID)
      formData.append("teamID",this.$store.state.teamID)

      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/team/settings',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: formData
      })
        .then(res => {              /* res 是 response 的缩写 */
          this.name=res.data.teamName
          this.dueTime="forever"
          this.setUpTime=res.data.creationTime
          this.maxCount=res.data.limitTime
          this.nowCount=res.data.nowNumber
          this.count=res.data.programNumber
          this.id=this.$store.state.teamID
          this.owner=res.data.creatorName
        })
        .catch(err => {
          /* 若出现异常则在终端输出相关信息 */
        })
    },
    changeName(){
      this.$prompt('请输入新团队名称', 'Change name', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        if(value.length===0){
          this.$message({
            type: 'info',
            message: '团队名称不能为空'
          });
        }
        const formData=new FormData();
        formData.append("newTeamName",value)
        formData.append("newTeamInformation","asd")
        formData.append("teamID",this.$store.state.teamID)
        formData.append("userID",this.$store.state.ID)
        this.$axios({
          method: 'post',           /* 指明请求方式，可以是 get 或 post */
          url: '/team/edit',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
          data:formData
        })
          .then(res => {              /* res 是 response 的缩写 */
            if(res.data.errno===0){
              localStorage.setItem("insuranceTeamCode", JSON.stringify(this.$store.state.teamID));
              localStorage.setItem("insuranceUserCode", JSON.stringify(this.$store.state.ID));
              this.$router.go(0);
            }

            else{
              this.$alert('无权限修改团队名称', '哦哦~', {
                confirmButtonText: '确定',
              });
            }

          })
          .catch(err => {
            /* 若出现异常则在终端输出相关信息 */
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '团队名称不能为空'
        });
      });
    },
    handleChange(value) {
      console.log(value);
    },
    copyID(){
      this.$copyText(this.id);
    }
  }
}
</script>

<style scoped>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-divider1{
  height: 100vh;
}
.el-main{
  margin-left: -23.3%;
  width: 950px;
}
.el-button {
  border-right:0!important;
  border-left:0!important;
  border-top:0!important;
  border-bottom:0!important;
}
</style>
